<template>
  <div class="page-regist page-account">
    <van-nav-bar
            fixed
            :z-index="100"
            left-text=""
            left-arrow
            @click-left="onClickLeft"
           >
    </van-nav-bar>
    <section class="form-section">
      <div class="form-item">
        <div class="label">手机号</div>
        <van-field
                class="form-field"
                v-model="phone"
                placeholder="请输入手机号"
                maxlength="11"
                v-validate="'required|phone'"
                name="phone"
        />
      </div>
      <div class="form-item">
        <div class="label">验证码</div>
        <van-field
                class="form-field"
                v-model="code"
                placeholder="请输入验证码"
                maxlength="6"
                v-validate="'required'"
                name="code"
        >
          <van-button slot="button" size="small" type="primary" class="verycode" :disabled="verycodeDisabled" @click="verycodeEvent">{{vericodeText}}</van-button>
        </van-field>
      </div>
      <div class="form-item">
        <div class="label">新密码</div>
        <van-field
                class="form-field"
                v-model="newPassword"
                type="password"
                placeholder="请输入新密码"
                @click-icon="changeVisible"
                name="newPassword"
                v-validate="'required'"
        />
      </div>
      <div class="form-item">
        <div class="label">确认密码</div>
        <van-field
                class="form-field"
                v-model="newPassword2"
                type="password"
                placeholder="请再次输入新密码"
                @click-icon="changeVisible"
                name="newPassword2"
                v-validate="'required'"
                @keyup.enter="submitEvent"
        />
      </div>
      <van-button @click="submitEvent" class="submit-button" :disabled="submitStatus" :loading="submitStatus" type="primary" size="large">修改密码</van-button>
    </section>

  </div>
</template>

<script>
import { API_RESET_PASSWORD, API_SEND_RESET_MSG } from '@/service/account'
import { wxjsdkMixin } from '@/components/mixins'
const countDown = 60
export default {
  mixins: [wxjsdkMixin],
  name: 'forget',
  data () {
    return {
      phone: '',
      code: '',
      newPassword: '',
      newPassword2: '',
      verycodeDisabled: false,
      countDown: countDown,
      submitStatus: false
    }
  },
  mounted () {
    this.wechatHideMenu()
  },
  computed: {
    vericodeText () {
      return this.verycodeDisabled ? `已发送(${this.countDown})` : '获取验证码'
    }
  },
  methods: {
    changeVisible () {
      this.passwordVisible = !this.passwordVisible
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    verycodeEvent () {
      if (!/^(1[3456789]\d{9})$/.test(this.phone)) {
        this.$toast('请填写手机号码')
        return
      }
      this.verycodeDisabled = true
      API_SEND_RESET_MSG(this.phone).then(resData => {
      })
      let timer = setInterval(() => {
        this.countDown--
        if (this.countDown === 0) {
          clearInterval(timer)
          this.countDown = countDown
          this.verycodeDisabled = false
        }
      }, 1000)
    },
    submitEvent () {
      this.$validator.validate().then(result => {
        if (result) {
          if (this.newPassword === this.newPassword2) {
            this.submitStatus = true
            let reqData = {
              phone: this.phone,
              newPassword: this.newPassword,
              code: this.code
            }
            API_RESET_PASSWORD(reqData).then(() => {
              this.$toast('密码重置成功！')
              this.$router.push({
                name: 'login'
              })
            }).catch(() => {
              this.submitStatus = false
            })
          } else {
            this.$toast('两次密码输入不一致')
          }
        } else {
          this.$toast(this.errors.all()[0])
        }
      })
    }
  }
}
</script>

<style lang="less">
  @import "../../assets/styles/account.less";
</style>
